<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" href="css/core.css" />
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>

	<body>
		<header class="header">
				<div class="top" id="top">
					<div class="content">		
						<div class="left">
							<div class="all-menu">
								<a href="#"></a>
								<div class="sub-menu">
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Not Found</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Search Results</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Skills</a></li>
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											
										</ul>
									</div>
								</div>
							</div>
							<div class="logo">
								<a href="#">
									<span class="icon"></span>
									<span class="globals"></span>
								</a>
							</div>
						</div>
						<div class="nav">
							<ul>
								<li><a href="index.html" >Home</a></li>
								<li class="pages">
									<a href="pages.html">Pages</a>
									<ul class="sub-nav">
										<li><a href="about-us.html">About Us</a></li>
										<li><a href="vancancies-details.html">Vacancies Details</a></li>
										<li><a href="blog-details.html">Blog Details</a></li>
									</ul>
								</li>
								<li  class="pages">
									<a href="portfolio.html">Portfolio</a>
									<ul class="sub-nav">
										<li><a href="masonry-four.html">Masonry Four</a></li>
										<li><a href="masonry-three.html">Masonry Three</a></li>
										<li><a href="grid_three.html">Grid Three</a></li>
										<li><a href="grid-masonry-three.html">Grid Masonry Three</a></li>
										<li><a href="landscape.html"  class="current">Landscape</a></li>
										<li><a href="gallery.html">Gallery</a></li>
									</ul>
								</li>
								<li><a href="vacancies.html">Vacancies</a>
								</li>
								<li><a href="blog.html">Blog</a></li>
								<li><a href="cantact.html">Contacts</a></li>
							</ul>
						</div>
						<div class="right">
							<span></span>
							<ul class="sub-nav">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Vacancies</a></li>
								<li><a href="#">FAQ</a></li>
								<li><a href="#">Pricing Table</a></li>
								<li><a href="#">Our Team</a></li>	
							</ul>
						</div>
					</div>
					
				</div>
		<!-------移动端导航------->
				<div class="menu-list" id="menu-list">
					<div class="item">
						<ul class="item-menu">
							<li class="home" id="home"></li>
							<li class="more"></li>
							<li class="logo"></li>
						</ul>
						<ul id="sub-menu">
							<li><a href="index.html">Home</a></li>
							<li><a href="pages.html">pages</a></li>
							<li><a href="portfolio.html">Portfolio</a></li>
							<li><a href="vacancies.html">Vacancies</a></li>	
							<li><a href="blog.html">Blog</a></li>
							<li><a href="cantact.html">Contacts</a></li>
						</ul>
					</div>
				</div>
				
				<div class="bottom" id="bottom">
					<div class="inner">
						<div class="left">
							<a href="#">Home</a>
							<span>/</span>
							<a href="#">pages</a>
							<span>/</span>
							<a href="#" class="current">Dropdown Menu Style</a>
						</div>
						<div class="right">
							<div class="message">
								<a href="#">+</a>
								<div class="send">
									<span><i></i>Send a Message</span>
								</div>
							</div>
						</div>
					</div>
				</div>
		</header>

		<section class="blog-details-banner">
			<div class="banner-main" id="blogDetailsBanner">
				<div class="main-pre" id="mainPre"></div>
				<div class="main-next" id="mainNext"></div>
				<div class="main-cycle">
					<ul>
						<li class="cycle-current" id="cycle0"></li>
						<li id="cycle1"></li>
						<li id="cycle2"></li>
						<li id="cycle3"></li>
					</ul>
				</div>
			</div>
		</section>

		<section class="blog-details-content clearfix">
			<div class="content-left">
				<span>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius est etiam prcessus dynamicus</span><br /><br />
				<p>Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to those that make you see the brighter side of things when you are really
					down,to those who you want to let them know that you appreciate their friendship.And if you don’t, don’t worry,nothing bad will happen to you,you will just miss out on the opportunity to brighten someone’s day with this message.</p>
				<div class="left-center clearfix">
					<img src="img/details2.jpg" />
					<div class="blog-details-p">
						<p>
							Claritas est etiam processus dynamicus,qui se-quitur mutationem consuetudium
						</p>
						<p class="left-center-text">
							-Frank Aams
						</p>
					</div>
				</div><br />

				<div class="left-p-inner clearfix">
					<p>She had been shopping with her Mom in Wal-Mart. She must have been 6 years old, this beautiful brown haired, freckle-faced image of innocence. It was pouring outside. The kind of rain that gushes over the top of rain gutters, so much in a hurry to
						hit the Earth, it has no time to flow down the spout.We all stood there under the awning and just inside the door of the Wal-Mart. We all waited, some patiently, others irritated, because nature messed up their hurried day. I am always mesmerized
						by rainfall. I get lost in the sound and sight of the heavens washing away the dirt and dust of the world. Memories of running, splashing so carefree as a child come pouring in as a welcome reprieve from the worries of my day.</p><br /><br />
					<p>The entire crowd stopped dead silent. I swear you couldn't hear anything but the rain. We all stood silently. No one came or left in the next few minutes. Mom paused and thought for a moment about what she would say.Now some would laugh it off and
						scold her for being silly. Some might even ignore what was said. But this was a moment of affirmation in a young child's life. Time when innocent trust can be nurtured so that it will bloom into faith. "Honey, you are absolutely right. Let's run
						through the rain. If get wet, well maybe we just needed washing." Mom said. Then off they ran</p>
				</div>
			</div>

			<div class="content-right">
				<div class="right-item ">
					<img src="img/portfolio-q1.jpg" class="right-item-img" />
					<p class="item-p">Date <span>07 Mary,2015</span></p>
				</div>
				<div class="right-item">
					<img src="img/portfolio-q2.jpg" class="right-item-img" />
					<p class="item-p">Category <span>Icons</span></p>
				</div>
				<div class="right-item">
					<img src="img/portfolio-q3.jpg" class="right-item-img" />
					<p class="item-p">Client <span>company INC</span></p>
				</div>

				<div class="right-bg">
					<div class="bg-cycle-item"></div>
					<div class="bg-item-text">Antonio Colliys</div>
					<div class="bg-admin">ADMIN</div><br /><br />
					<p>"This morning? When did I say we could run through the rain and not get wet"<a href="">more >></a></p>
					<div class="bg-menu-list">
						<ul>
							<li><img src="img/footer2.png" width="30px" height="30px" /></li>
							<li><img src="img/footer3.png" width="30px" height="30px" /></li>
							<li><img src="img/footer4.png" width="30px" height="30px" /></li>
							<li><img src="img/footer1.png" width="30px" height="30px" /></li>
						</ul>
					</div>
				</div>
			</div>
		</section>

		<section class="blog-details-item">
			<div class="item-inner">
				<img src="img/grid-masonry-box2.png" />&nbsp;&nbsp;
				<span>Tags:design sulliu derionuii yhdieb <a href="">auygh</a> gsbklo</span>
			</div>
		</section>

		<section class="blog-details-main clearfix">
			<div class="main-top">
				<span>Related Posts</span><br /><br />
				<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
			</div>
			<div class="main-img">
				<ul>
					<li>
						<img src="img/details3.jpg" width="625px" height="300px" />
						<p class="img-link"><a href="">Blog / vedio presentation</a></p>
					</li>
					<li>
						<img src="img/details4.jpg" width="625px" height="300px" />
						<p class="img-link"><a href="">Blog / vedio presentation</a></p>
					</li>
				</ul>
			</div>
		</section>

		<footer class="common-footer-wrapper">
			<div class="common-footer">
				<div class="common-footer-center">
					<div class="center-text">
						<span>Follow Us in Social Networks</span>
						<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
					</div>

					<ul class="center-menu">
						<li><img src="img/footer1.png" /></li>
						<li><img src="img/footer9.png" /></li>
						<li><img src="img/footer5.png" /></li>
						<li><img src="img/footer2.png" /></li>
						<li><img src="img/footer8.png" /></li>
						<li><img src="img/footer4.png" /></li>
						<li><img src="img/footer3.png" /></li>
						<li><img src="img/footer6.png" /></li>
					</ul>
				</div>
			</div>

			<div class="common-footer-bg">
				<div class="bg-text">
					<div class="text-left">
						<span>Twitter Widget</span>
						<div class="left-inner-top">
							<img src="img/footer7.png" />
							<div class="inner-top-write">
								Mirum est <a href="">@global</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>6 MINUTES AGO</p>
							</div>
						</div>

						<div class="left-inner-bottom">
							<img src="img/footer7.png" />
							<div class="inner-bottom-write">
								<a href="">@themefire</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>18 JUN 2015</p>
							</div>
						</div>
					</div>

					<div class="text-center">
						<span>Dribble Widget</span><br /><br />
						<div class="center-span">claritas est ynew trdhnm euy yebviumgd tyreuin oiywdw gyns ghbnh wikjsdhd</div>
						<ul class="center-img-item">
							<li><img src="img/footer11.jpg" width="139px" height="100px" /></li>
							<li><img src="img/footer13.jpg" width="139px" height="100px" /></li>
							<li class="item-hide"><img src="img/footer12.jpg" width="139px" height="100px" /></li>
							<li><img src="img/footer15.jpg" width="139px" height="100px" /></li>
							<li><img src="img/footer14.jpg" width="139px" height="100px" /></li>
							<li class="item-hide"><img src="img/footer16.jpg" width="139px" height="100px" /></li>
						</ul>
					</div>

					<div class="text-right">
						<span>Email Newsletters</span><br /><br />
						<div class="right-write">
							Sign Up our Newsletter to get latest updates and office subscribe to receive news in your inbox
						</div>
						<div class="right-email">
							Email Address
						</div>
						<div class="right-now">
							<a href="">Subscribe Now</a>
						</div>
					</div>
				</div>
			</div>

			<div class="common-footer-copyright">
				<div class="copyright-inner">
					<img src="img/footer-copyright.png" class="copyright-img" />
					<div class="copyright-text">@2015 Design Studio <span>Globals</span> /Designed by <span>ThemeFire</span> / only for <span>Envato Market</span></div>
				</div>
			</div>
		</footer>
		<script src="vendor/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/core.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var scale = 500 / 1349;
				function getWidth() {
					var width = $('.banner-main').width();
					$('.banner-main').height(scale * width);
				}
				getWidth();
				window.onresize = function() {
					getWidth();
				}
			})
			
			//图片轮播
			window.onload = function(){
				var pics = ['blog-details-banner5.jpg','blog-details-banner2.jpg','blog-details-banner4.jpeg','blog-details-banner3.jpg'];
				var blogBanner = document.getElementById('blogDetailsBanner');
				var mainPre = document.getElementById('mainPre');
				var mainNext = document.getElementById('mainNext');
				var i = 0;
				
				var id = setInterval(change,3000);
				
				blogBanner.onmouseover = function(){
					clearInterval(id);
				}
				
				blogBanner.onmouseout = function(){
					id = setInterval(change,3000);
				}
				
				
				function change(){
					i++;
					if(i == 4){
						i = 0;
					}
					
					blogBanner.style.background = 'url("img/' + pics[i] + '")';
					blogBanner.style.backgroundSize = '100% auto';
					blogBanner.style.transition = 'background 1s';
					
					pointchange();
				}
				
				mainNext.onclick = function(){
					change();
				}
				
				mainPre.onclick = function(){
					i--;
					if(i < 0){
						i = 3;
					}
					
					blogBanner.style.background = 'url("img/' + pics[i] + '")';
					blogBanner.style.backgroundSize = '100% auto';
					blogBanner.style.transition = 'background 1s';
					
				    pointchange();
				}
				//圆点的颜色
				function pointchange(){
					for(var j = 0; j < 4; j++){
						document.getElementById('cycle' + j).className = 'cycle-nocurrent';
					}
					document.getElementById('cycle' + i).className = 'cycle-current';
				}
				
				//圆点点击事件
				for(var j = 0; j < 4; j++){
					document.getElementById('cycle' + j).onclick = function(j){
						return function(){
							blogBanner.style.background = 'url("img/' + pics[j] + '")';
							blogBanner.style.backgroundSize = '100% auto';
							blogBanner.style.transition = 'background 1s';
							
							i = j;
				    		pointchange();	
						}
					}(j);
				}
			}

		</script>
	</body>

</html>